<template>
  <div class="mList">
    <m-card
      class="form"
      :needToggle="true"
      showText="收起搜索条件"
      hideText="展开搜索条件"
    >
      <div class="lfilter">
        <div>
          <div class="lfilter__item filter__name">
            <span>微信昵称</span>
            <el-input
              v-model="filter.nikeName"
              placeholder="输入会员昵称"
            ></el-input>
          </div>
          <div class="lfilter__item">
            <span>成为会员时间</span>
            <el-date-picker
              v-model="filter.becomeMemberTime"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </div>
        </div>
        <div>
          <div class="lfilter__item">
            <span>标签</span>
            <el-select
              v-model="filter.tagId"
              clearable
              placeholder="请选择标签"
            >
              <el-option label="全部" :value="null" />
              <el-option
                v-for="tag in allTagList"
                :key="tag.tagId + 'tagId'"
                :label="tag.tagName"
                :value="tag.tagId"
              />
            </el-select>
          </div>
          <div class="lfilter__item">
            <span>上次交易时间</span>
            <el-date-picker
              v-model="filter.orderSuccessTime"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </div>
        </div>
        <div>
          <div class="lfilter__item">
            <span>会员等级</span>
            <el-select v-model="filter.rankCode" placeholder="选择会员等级">
              <el-option label="全部" :value="null" />
              <el-option
                v-for="item in rankOptions"
                :key="item.id"
                :label="`${item.rankName}(LV${item.rankCode})`"
                :value="item.rankCode"
              ></el-option>
            </el-select>
          </div>
          <!-- <div class="lfilter__item">
            <span>会员卡号</span>
            <el-input
              v-model="filter.memberNumber"
              placeholder="输入会员卡号"
            ></el-input>
          </div> -->
        </div>
        <el-button @click="getDataList" type="primary">搜索</el-button>
      </div>
    </m-card>
    <div class="boperate">
      <el-button @click="onBatchSetLabel">设置标签</el-button>
      <el-select v-model="filter.sortType" @change="handleChange">
        <el-option
          v-for="item in sorts"
          :key="item.value + 'sorts'"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </div>
    <m-table
      :data="dataList"
      :selection="true"
      needHoverBorder
      :checked-item.sync="multipleSelection"
      ref="customerListRef"
      class="customerList"
    >
      <!-- <template v-slot:header="{ row }">
        <div style="width:100%">
          <span style="margin-right:50px"
            >会员卡号：{{ row.memberNumber }}</span
          >
          <span>成为会员时间{{ row.memberRegisterTime }}</span>
          <span>(已成为会员{{ row.becomeMemberDayNumber }}天)</span>
        </div>
      </template> -->
      <m-table-column label="客户信息" v-slot="{ row }" width="240" height="80">
        <div class="info">
          <el-popover
            placement="bottom-start"
            width="200"
            trigger="hover"
            :disabled="!row.memberInnerListVos[0].registerData"
          >
            <div v-for="item in JSON.parse(row.memberInnerListVos[0].registerData)" :key="item.id">{{item.formName}}:{{item.value}}</div>
            <img class="info__img" :src="row.avatarUrl" alt slot="reference" />
          </el-popover>

          <div class="info__msg">
            <div class="info__msg--text">
              {{ row.nikeName }}
              <span v-if="row.phone">({{ row.phone }})</span>
            </div>
            <div class="info__msg--tags" @click="setLabel(row)">
              <span v-if="row.userTagVos !== null && row.userTagVos.length > 0">
                <el-button type="text">
                  {{
                    row.userTagVos
                      .map((tag) => tag.tagName)
                      .slice(0, 2)
                      .join(" ; ")
                  }}
                </el-button>
                <span>等共{{ row.userTagVos.length }}个标签</span>
              </span>
              <el-button
                type="text"
                v-if="
                  row.userTagVos === null ||
                  (row.userTagVos !== null && row.userTagVos.length === 0)
                "
                >请选择所属标签</el-button
              >
              <i class="el-icon-caret-bottom"></i>
            </div>
          </div>
        </div>
      </m-table-column>
      <!-- <m-table-column label="会员等级名称" v-slot="{ row }">
        <span>{{ row.rankName }}</span>
      </m-table-column> -->
      <m-table-column label="消费次数" v-slot="{ row }">
        <span>{{ row.consumeNum }}</span>
      </m-table-column>
      <m-table-column prop="consumeTotleMoney" label="交易总额" />
      <m-table-column prop="integral" label="可用积分" />
      <m-table-column prop="supplyBonus" label="可用余额" />
      <m-table-column prop="orderLastDealTime" label="上次交易时间" />
      <m-table-column label="操作" v-slot="{ row }">
        <set-drop
          setName="会员续费"
          :dropdownList="dropdownList(row)"
          @setClick="itemClick(row)"
          @command="itemCommand($event, row)"
        />
      </m-table-column>
    </m-table>
    <el-pagination
      class="bottom-setting"
      @current-change="handleCurrentChange"
      :page-sizes="[10, 20, 30, 40]"
      @size-change="handleSizeChange"
      :current-page.sync="pageNum"
      :page-size="pageSize"
      :pageNum="pageNum"
      layout="total, prev, pager, next, sizes"
      :total="total"
    ></el-pagination>
    <set-label
      ref="labelDialogRef"
      v-if="labelVisible"
      :allTags="allTagList"
      @refreshDataList="getDataList"
    />
    <renew-member @refreshDataList="getDataList" ref="renewMemberRef" />
    <UpgradeMember @refreshDataList="getDataList" ref="upgradeMemberRef" />
    <MemberRecord ref="memberRecordRef" />
  </div>
</template>

<script lang="ts">
import { Vue, Component, Ref } from "vue-property-decorator";
import DateUtil from "@/store/modules/date";
import SetDrop from "@/views/customer/common/SetDrop.vue";
import SetLabel from "@/views/customer/list/components/dialog/SetTags.vue";
import RenewMember from "@/views/customer/list/components/dialog/RenewMember.vue";
import UpgradeMember from "@/views/customer/list/components/dialog/UpgradeMember.vue";
import MemberRecord from "@/views/customer/list/components/dialog/MemberRecord.vue";
import { getAllTags } from "@/api/customer/customer";
import { getMemberList, getMemberCardRank } from "@/api/customer/member";

@Component({
  components: {
    SetDrop,
    SetLabel,
    RenewMember,
    UpgradeMember,
    MemberRecord,
  },
})
export default class Member extends Vue {
  @Ref() readonly labelDialogRef;

  @Ref() readonly renewMemberRef;

  @Ref() readonly upgradeMemberRef;

  @Ref() readonly memberRecordRef;

  // 过滤条件
  filter: any = { sortType: 3, tagId: null, rankCode: null };

  // 标案数据
  tags = [];

  // 会员身份数据
  rankOptions = [];

  // 排序方式
  sorts = [
    { value: 1, label: "按照交易总额降序" },
    { value: 2, label: "按照交易总额升序" },
    { value: 3, label: "按照成为会员时间降序" },
    { value: 4, label: "按照成为会员时间升序" },
  ];

  // 表格数据
  dataList = [];

  // 分页条数
  pageSize = 20;

  // 页码
  pageNum = 1;

  // 总数
  total = 0;

  // 标签
  allTagList: any[] = [];

  // 选中的标签
  multipleSelection = [];

  // 设置标签modal的显示
  labelVisible = false;

  created() {
    this.getDataList();
    this.getRankList();
  }

  // 等级下拉列表数据请求
  getRankList() {
    getMemberCardRank(null).then((res) => {
      if (res.code === 200) {
        this.rankOptions = res.data || [];
      }
    });
  }

  /**
   * 获取用户列表
   */
  getDataList() {
    // const form = this.dataForm;
    const filter = this.filter;
    const param = {
      page: this.pageNum,
      size: this.pageSize,
      sortType: filter.sortType,
      memberNumber: filter.memberNumber,
      rankCode: filter.rankCode,
      nikeName: filter.nikeName,
      tagId: filter.tagId,
      becomeMemberStartTime: filter.becomeMemberTime
        ? `${this.dateConversion(filter.becomeMemberTime[0])} 00:00`
        : "",
      becomeMemberEndTime: filter.becomeMemberTime
        ? `${this.dateConversion(filter.becomeMemberTime[1])} 23:59`
        : "",
      orderSuccessStartTime: filter.orderSuccessTime
        ? `${this.dateConversion(filter.orderSuccessTime[0])} 00:00`
        : "",
      orderSuccessEndTime: filter.orderSuccessTime
        ? `${this.dateConversion(filter.orderSuccessTime[1])} 23:59`
        : "",
    };
    getMemberList(param).then((res) => {
      this.dataList = res.data.list;
      this.pageSize = res.data.size;
      this.pageNum = res.data.current;
      this.total = res.data.total;
    });
    this.getTags();
  }

  // 格式化日期
  dateConversion(value) {
    const date = new DateUtil("").getYMDs(value);
    return date;
  }

  // 获取标签总数
  getTags() {
    getAllTags().then((res) => {
      this.allTagList = res.data;
    });
  }

  // 表格操作项'...'的点击
  itemClick(row) {
    this.renewMemberRef.init(row);
  }

  handleChange() {
    this.pageNum = 1;
    this.getDataList();
  }

  // 表格分页变化
  handleCurrentChange(val) {
    this.pageNum = val;
    this.getDataList();
  }

  // 表格尺寸变化
  handleSizeChange(val) {
    this.pageSize = val;
    this.getDataList();
  }

  // 操作下拉
  get dropdownList() {
    return () => {
      return [
        {
          command: "升级会员",
          show: true,
          disabled: false,
          text: "升级会员",
        },
        {
          command: "会员记录",
          show: true,
          disabled: false,
          text: "会员记录",
        },
      ];
    };
  }

  // 表格操作点击后的下拉
  itemCommand(command, row) {
    switch (command) {
      case "升级会员":
        this.upgradeMemberRef.init(row);
        break;
      case "会员记录":
        this.memberRecordRef.init(row);
        break;
    }
  }

  // 行设置标签
  setLabel(row) {
    this.labelVisible = true;
    this.$nextTick(() => {
      this.labelDialogRef.init([row]);
    });
  }

  // 批量设置标签
  onBatchSetLabel() {
    if (this.multipleSelection.length > 0) {
      this.labelVisible = true;
      this.$nextTick(() => {
        this.labelDialogRef.init(this.multipleSelection);
      });
    } else {
      this.$message({
        message: "请选择会员",
        type: "warning",
      });
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../../../../assets/styles/cutomer/customer";
.bottom-setting {
  position: fixed;
  bottom: 10px;
  width: 990px !important;
  z-index: 10;
  background: #fff;
  padding: 10px 0;
}
@include b(lfilter) {
  background: rgb(248, 248, 248);
  button {
    margin-left: 100px;
  }
  > div {
    overflow: hidden;
    margin-bottom: 16px;
  }
  @include e(name) {
    // .el-input {
    //   width: 194px;
    // }
  }
  @include e(item) {
    float: left;
    width: 50%;
    .el-input,
    .el-select {
      width: 350px;
    }
    > span {
      display: inline-block;
      width: 100px;
    }
  }
}
@include b(boperate) {
  margin: 24px 0;
  > div {
    float: right;
  }
}
@include b(form) {
  &.show {
    height: 248px;
  }
}
@include b(mList) {
  .el-pagination {
    text-align: right;
  }
}
@include b(customerList) {
  margin-bottom: 20px;
}
</style>
